<template>
  <u-popup
    :show="show"
    mode="bottom"
    @close="onClose"
    @open="onOpen"
    :closeable="true"
    :safeAreaInsetBottom="true"
    round="15"
  >
    <view class="pay-popup">
      <view class="header">收银台</view>
      <view class="amount">

        <view class="flex" v-if="displayAmount && displayAmount.toString().includes('.')">
            <view class="font52">￥</view>
            <view class="font60">{{ displayAmount.toString().split('.')[0] }}</view>
            <view class="font52">.{{ displayAmount.toString().split('.')[1] }}</view>
        </view>
        <view class="flex" v-else>
            <view class="font52">￥</view>
            <view class="font60">{{ displayAmount || '0' }}</view>
            <view class="font52">.00</view>
        </view>
      </view>

      <view class="virtual-box" v-if="isVirtual" @click="virtualEvent">
        <text class="virtual-label">虚拟资产</text>
        <view class="virtual-value">
            <text class="virtual-asset">{{ virtualAssetText }}</text>
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>

      <view class="pay_title"  v-if="isVirtual">支付方式</view>

      <filter-pop
        :list="radioList"
        active-color="#2e9bff"
        placement="column"
        icon-placement="right"
        shape="circle"
        :borderStatus="true"
        padding="28rpx 0"
        @radioChange="onRadioChange"
      >
      </filter-pop>

      <view class="footer">
        <u-button
            color="linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%)"
            type="primary"
            text="确认支付"
            shape="circle"
            :disabled="confirmDisabled"
            @click="confirm"
        />
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'OrderPayPopup',
  components: {
    FilterPop: () => import('@/components/filter-pop/index.vue'),
    virtual: () => import('@/components/virtual-asset-popup/index.vue')
  },
  props: {
    show: { type: Boolean, default: false },
    amount: { type: Number, default: 0 },
    balance: { type: Number, default: 0 },
    defaultMethod: { type: String, default: 'wechat' }, // 'wechat' | 'alipay' | 'balance'
    wechatEnabled: { type: Boolean, default: true },
    alipayEnabled: { type: Boolean, default: true },
    balanceEnabled: { type: Boolean, default: true },
    isVirtual: {type: Boolean, default: false},
    virtualAssetText: {
      type: String,
      default:'请选择'
    }
  },
  data() {
    return {
      method: '',
    };
  },
  computed: {
    radioList() {
      const list = []
      if (this.wechatEnabled) {
        list.push({ 
            name: '微信支付',
            value: 'wechat', 
            active: this.method === 'wechat', 
            disabled: false, 
            icon: {
                name:"icon-weixinzhifu", 
                color:"#15ba11",
                size: 32
            }
        })
      }
      if (this.alipayEnabled) {
        list.push({ 
            name: '支付宝支付',
            value: 'alipay', 
            active: this.method === 'alipay', 
            disabled: false, 
            icon: {
                name: "icon-zhifubaozhifu",
                color: "#009fe8",
                size: 32
            }
        })
      }
      if (this.balanceEnabled) {
        const txt = this.balanceInsufficient ? `金额不足，剩余￥${this.displayBalance}` : `剩余￥${this.displayBalance}`
        list.push({ 
            name: '余额支付', 
            txt, 
            value: 'balance', 
            active: this.method === 'balance', 
            disabled: this.balanceInsufficient, 
            icon: {
                name: "icon-yuebao",
                color: "#f15a4a",
                size: 32
            }
        })
      }
      // 标记默认选中项
      return list.map(item => ({ ...item, active: item.value === this.method }))
    },
    displayAmount() {
      return Number(this.amount || 0).toFixed(2);
    },
    displayBalance() {
      return Number(this.balance || 0).toFixed(2);
    },
    balanceInsufficient() {
      return Number(this.balance) < Number(this.amount);
    },
    confirmDisabled() {
      if (!this.method) return true;
      if (this.method === 'balance' && this.balanceInsufficient) return true;
      return false;
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.ensureDefaultMethod();
      }
    }
  },
  methods: {
    virtualEvent() {
      this.$emit('virtualEvent')
    },
    onOpen() {
      this.ensureDefaultMethod();
      this.$emit('open');
    },
    onClose() {
      this.$emit('update:show', false);
      this.$emit('close');
    },
    ensureDefaultMethod() {
      if (this.method) return;
      const candidates = [];
      if (this.wechatEnabled) candidates.push('wechat');
      if (this.alipayEnabled) candidates.push('alipay');
      if (this.balanceEnabled && !this.balanceInsufficient) candidates.push('balance');
      if (candidates.includes(this.defaultMethod)) {
        this.method = this.defaultMethod;
      } else {
        this.method = candidates[0] || '';
      }
    },
    onRadioChange(name) {
      if (name === '微信支付') this.method = 'wechat'
      else if (name === '支付宝支付') this.method = 'alipay'
      else if (name.indexOf('余额支付') === 0) {
        if (this.balanceInsufficient) return
        this.method = 'balance'
      }
    },
    confirm() {
      if (this.confirmDisabled) return;
      this.$emit('confirm', { method: this.method, amount: this.amount });
    }
  }
};
</script>

<style lang="scss" scoped>
.pay-popup {
  padding: 24rpx 32rpx 40rpx;
}
.header {
  text-align: center;
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin-top: 6rpx;
}
.amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  color: #ff4d4f;
  margin: 24rpx 0 8rpx;

  .flex {
    display: flex;
    align-items: baseline;
    justify-content: center;
  }

  .font52 {
    font-size: 52rpx;
  }

  .font60 {
    font-size: 60rpx;
  }
}
.pay-list {
  margin-top: 12rpx;
}
.pay-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 8rpx;
  border-bottom: 2rpx solid #f2f3f5;
}
.pay-item.disabled {
  opacity: 0.55;
}
.left {
  display: flex;
  align-items: center;
}
.left .title {
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}
.texts {
  display: flex;
  flex-direction: column;
  margin-left: -8rpx;
}
.sub {
    margin-left: 16rpx;
  font-size: 24rpx;
  color: #9aa0a6;
}
.right .check {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #c8c9cc;
}
.right .check.checked {
  background-color: #2e9bff;
  border-color: #2e9bff;
}

.pay_title {
  font-size: 30rpx;
  color: #333333;
  font-weight: bold;
  margin: 28rpx 0 0;
}

.virtual-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #DDD;

    .virtual-value {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  .virtual-label {
      font-size: 28rpx;
      color: #333;
  }

  .virtual-asset {
      font-size: 28rpx;
      color: #999;
  }
}


.footer {
  margin-top: 48rpx;
}
</style>